<template>
  <div>
    <!--  分割线-->
    <el-divider></el-divider>
    <el-tabs @tab-click="handleClick">
      <!--    |基本资料-->
      <span style="font-weight:bold;"><span style="color:royalblue">|</span>&nbsp;基本资料</span>
      <div style="height: 30px"></div>
      <div class="firstDiv" :model="firstlist">
        <el-row>
          <el-col :span="8">
            <div class="grid-content">
              <div>
                账号:<br/>{{ firstlist.userName }}
              </div>
            </div>
          </el-col>
          <el-col :span="8">
            <div class="grid-content">
              <div>
                姓名:<br/>{{ firstlist.empName }}
              </div>
            </div>
          </el-col>
          <el-col :span="8">
            <div class="grid-content">
              <div>用户组:<br/>{{ firstlist.roleName }}</div>
            </div>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="8">
            <div class="grid-content">
              <div>手机号码:<br/>{{ firstlist.empPhone }}</div>
            </div>
          </el-col>
          <el-col :span="8">
            <div class="grid-content">
              <div>联系地址:<br/>{{ firstlist.empSite }}</div>
            </div>
          </el-col>
          <el-col :span="8">
            <div class="grid-content">
              <div>入职时间:<br/>{{ firstlist.empEntrydate }}</div>
            </div>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="8">
            <div class="grid-content">
              <div>邮箱地址:<br/>{{ firstlist.empEmail }}</div>
            </div>
          </el-col>
          <el-col :span="8">
            <div class="grid-content">
              <div>邮政编码:<br/>{{ firstlist.empPostcode }}</div>
            </div>
          </el-col>
          <el-col :span="8">
            <div class="grid-content">
              <div>QQ账号:<br/>{{ firstlist.empQq }}</div>
            </div>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="8">
            <div class="grid-content">
              <div>微信账号:<br/>{{ firstlist.empWechat }}</div>
            </div>
          </el-col>
          <el-col :span="8">
            <div class="grid-content">
              <div>合同开始日期:<br/>{{ firstlist.empContStartdate }}</div>
            </div>
          </el-col>
          <el-col :span="8">
            <div class="grid-content">
              <div>合同结束日期:<br/>{{ firstlist.empContEnddate }}</div>
            </div>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="8">
            <div class="grid-content">
              <div>在职状态:<br/>{{ firstlist.empWorkstatus }}</div>
            </div>
          </el-col>
          <el-col :span="8">
            <div class="grid-content">
              <div>社保号码:<br/>{{ firstlist.empSocialNum }}</div>
            </div>
          </el-col>
          <el-col :span="8">
            <div class="grid-content">
              <div>性别:<br/>{{ firstlist.empSex }}</div>
            </div>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="8">
            <div class="grid-content">
              <div>出生日期:<br/>{{ firstlist.empBirthdate }}</div>
            </div>
          </el-col>
          <el-col :span="8">
            <div class="grid-content">
              <div>照片:<br/><el-button type="text" @click="shouTupian">查看</el-button></div>
            </div>
          </el-col>
          <el-col :span="8"></el-col>
        </el-row>
      </div>
      <!--    |详细资料-->
      <div style="height: 40px"></div>
      <span style="font-weight:bold"><span style="color:royalblue">|</span>&nbsp;详细资料</span>
      <div style="height: 30px"></div>
      <div class="firstDiv" :model="firstlist">
        <el-row>
          <el-col :span="8">
            <div class="grid-content">
              <div>
                证件类型:<br/>{{ firstlist.empPaperstype }}
              </div>
            </div>
          </el-col>
          <el-col :span="8">
            <div class="grid-content">
              <div>
                证件号:<br/>{{ firstlist.empPapersnum }}
              </div>
            </div>
          </el-col>
          <el-col :span="8">
            <div class="grid-content">
              <div>婚姻情况:<br/>{{ firstlist.empMaritalsta }}</div>
            </div>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="8">
            <div class="grid-content">
              <div>门禁号:<br/>{{ firstlist.empEntrancenum }}</div>
            </div>
          </el-col>
          <el-col :span="8">
            <div class="grid-content">
              <div>执业证号码:<br/>{{ firstlist.empPracnum }}</div>
            </div>
          </el-col>
          <el-col :span="8">
            <div class="grid-content">
              <div>首次执业时间:<br/>{{ firstlist.empPracdate }}</div>
            </div>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="8">
            <div class="grid-content">
              <div>首次执业地:<br/>{{ firstlist.empPracsite }}</div>
            </div>
          </el-col>
          <el-col :span="8">
            <div class="grid-content">
              <div>资格证号码:<br/>{{ firstlist.empCertifynum }}</div>
            </div>
          </el-col>
          <el-col :span="8">
            <div class="grid-content">
              <div>资格证取得方式:<br/>{{ firstlist.empGainway }}</div>
            </div>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="8">
            <div class="grid-content">
              <div>资格证取得地:<br/>{{ firstlist.empGainsite }}</div>
            </div>
          </el-col>
          <el-col :span="8">
            <div class="grid-content">
              <div>资格证类别:<br/>{{ firstlist.hrCertifyId }}</div>
            </div>
          </el-col>
          <el-col :span="8">
            <div class="grid-content">
              <div>执业类别:<br/>{{ firstlist.hrPractiseId }}</div>
            </div>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="8">
            <div class="grid-content">
              <div>专业部:<br/>{{ firstlist.hrSpecialtyId }}</div>
            </div>
          </el-col>
          <el-col :span="8">
            <div class="grid-content">
              <div>民族:<br/>{{ firstlist.hrNationId }}</div>
            </div>
          </el-col>
          <el-col :span="8">
            <div class="grid-content">
              <div>政治面貌:<br/>{{ firstlist.hrPoliticalId }}</div>
            </div>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="8">
            <div class="grid-content">
              <div>个人介绍:<br/>{{ firstlist.empIntroduce }}</div>
            </div>
          </el-col>
          <el-col :span="8"></el-col>
          <el-col :span="8"></el-col>
        </el-row>
      </div>
    </el-tabs>

<!--  显示图片对话框  -->
    <el-dialog
        title="照片"
        :visible.sync="dialogVisible"
        width="30%">

      <el-image :src="firstlist.empPicture"></el-image>

    </el-dialog>

  </div>
</template>

<script>
export default {
  name: "SystemUserSelect.vue",
  data() {
    return {
      dialogVisible:false,// 控制对话框
      id: this.$route.params.id,
      firstlist: {},
    }
  },
  created() {
    this.getSystemUser()
  },
  methods: {
    //根据id查询信息
    getSystemUser() {
      this.$http
          .get("systemUser",
              {params: {'id': this.id, "biaoshi": "3"}})
          .then((res) => {
            if (res.data.empSex == "M") {
              res.data.empSex = "男";
            } else {
              res.data.empSex = "女";
            }
            if (res.data.empWorkstatus == "Y") {
              res.data.empWorkstatus = "在职";
            } else {
              res.data.empWorkstatus = "不在职";
            }
            this.firstlist = res.data.data[0];
          })
          .catch(function (error) {
            console.log(error);
          });
    },
    handleClick() {
      //接收参数
      return this.$route.params.id;
    },
    shouTupian(){//图片对话框显示
      this.dialogVisible=true
    }
  }
}
</script>

<style scoped>
.grid-content {
  min-height: 80px;
  border: 1px solid gainsboro;
}

.grid-content > div {
  margin: 4% 0 0 1%
}
</style>